<!-- 巷道管理 - 综合表单页面 -->
<template>
  <div class="page-container" style="display: flex; margin-top: 0px;">

    <div style="height: 40px; line-height: 40px;">
      当前位置： 字典配置
    </div>

    <div style="display: flex;  flex: 1; gap: 20px;">

      <div style="width: 400px;">

        <div style="line-height: 32px; height: 32px;"><!--字典类型--></div>

        <el-table :data="disTypeArr" style="width: 100%" @row-click="typeRowClick">
          <el-table-column  label="字典类型编码" min-width="180">
            <template slot-scope="scope">
              <span :class="scope.row == selectedRow ? 'selected-highlight-row' : ''">
                {{ scope.row }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="描述" min-width="180">
            <template slot-scope="scope">
              <span :class="scope.row == selectedRow ? 'selected-highlight-row' : ''">{{ $tt('WmsDictKeyEnum__' + scope.row) }}</span>
            </template>
          </el-table-column>
        </el-table>

      </div>

      <div style="flex: 1; ">

        <div>
          <el-button :disabled="selectedRow== '' " icon="el-icon-plus" @click="dialogFormVisible = true; formValue = {'dictKey': selectedRow } ">新增字典值</el-button>
        </div>

        <el-table :data="dicValueArray" style="width: 100%"  >
          <el-table-column prop="dictName"  label="字典值名称" min-width="180">
          </el-table-column>

          <el-table-column prop="dictValue"  label="字典值编码" min-width="180">
          </el-table-column>

          <el-table-column align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="formValue = JSON.parse(JSON.stringify(scope.row)); dialogFormVisible = true; ">修改</el-button>

              <ex-button-delete
                deleteUrl="/wms-api/base/WmsDictValueRpc/remove.json"
                :deleteParam="{
                    id: scope.row.id
                 }"
                @afterOperationDone="loadValues()"
                message="确认删除该字典值吗？"
                label="删除"
                >
              </ex-button-delete>


            </template>
          </el-table-column>

        </el-table>

      </div>

    </div>


    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="600px">
      <el-form  label-width="160px">
        <el-form-item label="字典值名称" >
          <el-input v-model="formValue.dictName" ></el-input>
        </el-form-item>
        <el-form-item label="字典值编码" >
          <el-input v-model="formValue.dictValue" ></el-input>
        </el-form-item>
        <el-form-item label="字典值排序（从大到小）" >
          <el-input v-model="formValue.dictSort" ></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDictForm()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>

  export default {
    title: '字典配置',
    components: {},
    data() {
      return {
        selectedRow: '',

        disTypeArr: [],

        dicValueArray:[],

        dialogFormVisible: false,

        formValue: {}

      };
    },

    created(){
      this.loadType()
    },

    watch:{
      'selectedRow'(val, old){
        this.loadValues()
      }
    },

    methods: {
      loadType(){

        let _this = this

        this.$ajax({
          url: '/wms-api/base/WmsDictValueRpc/dictType.json',
          success: (responseData) => {
             _this.disTypeArr = responseData.data.rows
          }
        });
      },

      loadValues(){

        let _this = this

        this.$ajax({
          url: '/wms-api/base/WmsDictValueRpc/dictValue.json',
          data:{
            'dictKey': _this.selectedRow
          },
          success: (responseData) => {
            _this.dicValueArray = responseData.data.rows
          }

        });
      },

      submitDictForm(){

        let _this = this

        this.$ajax({
          url: '/wms-api/base/WmsDictValueRpc/saveUpdate.json',
          data: _this.formValue,
          success: (responseData) => {
            _this.$message({
              type: 'success',
              message: '添加成功'
            })
            _this.loadValues()

            _this.dialogFormVisible = false
          }

        });
      },

      typeRowClick(row, column, event){
        if(!row){
          return
        }
        this.selectedRow = row
      }

    }
  };

</script>
<style>
  .selected-highlight-row{
    font-weight: bold;
    color: #409EFF;
  }

</style>
